\chapter{The State of The Art}
\labelchapter{the_state_of_the_art}
%-----------------------
\beginchapter
%-----------------------
Before the start of the implementation, a review of currently existing diagramming tools was done regarding the features they provide as well as the future planned ones. This review was necessary to find out the features related to keyboard navigation and editing in current diagramming tools. Also previous research done in that field was considered.

\section{Currently Available Tools}
\subsection{Comparision}
The tools investigated fall under many categories, UML tools, SVG editors, general purpose diagramming tools, and so on. In total 25 tools were investigated. The investigation checked if the tools contain any of the six features listed below, how well they are developed, their usability and efficiency. Only the tools containing relevant features were considered. For a closer investigation, the relevant tools were organized in\reftable{comparision_of_tools} and compared based on the presence of one or more of the six features subject of investigation.

\begin{itemize}
\item {\bf Feature 1:}
Smart Navigation considering the position of the nodes and its connections. This feature is more advanced than simple tab-based navigation.

\item {\bf Feature 2:}
Adding shapes using keyboard.

\item {\bf Feature 3:}
Deleting shapes using keyboard.

\item {\bf Feature 4:}
Dragging shapes using keyboard.

\item {\bf Feature 5:}
Editing shape properties using keyboard.

\item {\bf Feature 6:}
Creating diagram using a script.
\end{itemize}

\begin{center}
\begin{table}[ht]
\footnotesize
{\bf Table Legend:}\\
{\bf F.} stands for {\bf Feature}.\\
- not implemented.\\
+ implemented in an unusable, inefficient, or incomplete way.\\
++ fully implemented in a usable and efficient way.\\
\normalsize
	\begin{tabular}{ | l | l | l | l | l | l | l |}
	\hline
	{\bf Tool} & {\bf F. 1} & {\bf F. 2} & {\bf F. 3} & {\bf F. 4} & {\bf F. 5} & {\bf F. 6}\\ \hline \hline 
	Papyrus UML\cite{papyrus} & + & - & ++ & - & - & -\\ \hline
	ArgoUML\cite{argouml} & - & - & ++ & ++ & - & -\\ \hline
	Violet UML Editor\cite{violet} & - & - & ++ & - & - & -\\ \hline
	yEd\cite{yed} & ++ & - & ++ & - & - & -\\ \hline
	OpenOffice Draw\cite{oo_draw} & - & - & ++ & ++ & ++ & -\\ \hline
	Xfig\cite{xfig} & - & -* & - & - & - & -\\ \hline
	IBM WebSphere Studio\cite{ibm_websphere_studio} & + & ++ & ++ & ++ & ++ & -\\ \hline
	IBM Rational Application Developer\cite{ibm_rational_application_developper} & + & - & ++ & ++ & - & -\\ \hline
	Graphviz\cite{graphviz} & - & - & - & - & - & +\\ \hline
	BPLOT2\cite{bplot2} & - & - & - & - & - & ++\\ \hline
	\end{tabular}\\
\footnotesize
{* Xifg has keyboard accelerators to almost every item in the toolbox but it doesn't support drawing with the keyboard.}
\caption{Comparison of Tools}
\labeltable{comparision_of_tools}
\end{table}
\end{center}

\subsection{Features}
This subsection will state how each tool provides one or more of the investigated features to the user and how the user can access and use these investigated features.

\subsubsection {Feature 1: {\em Smart Navigation considering the position of the nodes and its connections}} 
{\em Papyrus UML} includes only arrow keys navigation. {\em yEd} is one of the tools that have implemented a very good keyboard navigation for the diagram, one can simply select the connection that he wants to follow using the arrow keys while pressing Alt, the right arrow to toggle the connections in a clockwise order, and the left arrow for a counter clockwise order, and then to follow that connection one can release the Alt and press the arrow in the direction he wants to follow for the selected connection, i.e. the direction to one end of the connection, the initial one or the one to the other side. {\em OpenOffice Draw} only offers tab navigation through the shapes, and doesn't support any type of smart navigation. {\em IBM WebSphere Studio} supports the following functionality using the keyboard: Toggling through single shape selections, Toggling through single connector selections, Selecting multiple shapes, Selecting multiple connectors, Deselecting or reselecting a selected shape, and Deselecting or reselecting a selected connector. {\em IBM Rational Application Developer} supports similar functionality, it gives the ability to navigate in 3 modes, Node Traversal, Connection Traversal, and Dragging mode.

\subsubsection {Feature 2: {\em Adding shapes using keyboard}} 
{\em Xifg} has keyboard accelerators to almost every item in the toolbox but it doesn't support drawing with the keyboard. {\em IBM WebSphere Studio} supports adding shapes to the diagram using only the keyboard as well as connecting them.

\subsubsection {Feature 3: {\em Deleting shapes using keyboard}} 
Many tools include this feature through pressing the delete key after selecting the shapes to delete. Among the tools that include this feature are {\em Papyrus UML}, {\em ArgoUML}, {\em Violet UML Editor}, {\em yEd}, {\em OpenOffice Draw}, {\em IBM WebSphere Studio}, and {\em IBM Rational Application Developer}.

\subsubsection {Feature 4: {\em Dragging shapes using keyboard}} 
{\em ArgoUML} supports dragging shapes using the keyboard in two modes, either directly using the arrow keys which will drag the node in very small steps, or using the arrow keys while pressing the Alt key, which will cause the dragging to be done in much larger steps to allow dragging for long distances. Also {\em OpenOffice Draw} supports dragging shapes using the arrow keys. {\em IBM WebSphere Studio} also supports moving shapes within the diagram using only the keyboard. Dragging is possible in {\em IBM Rational Application Developer} through their dragging navigation mode.

\subsubsection {Feature 5: {\em Editing shape properties using keyboard}} 
{\em OpenOffice Draw} implements the Menu Based Editing (in\refsubsection{menu_based_editing}) by pressing the properties key and then choosing the property to edit from the menu. After choosing the wanted property the user is presented with a dialog with the current value for that property, the user can navigate and change these values and apply the changes by pressing the ``ok'' button, or the Return key. The user can also change the text in a shape in {\em OpenOffice Draw} by simply typing the new text, and then pressing Esc after he is done. {\em IBM WebSphere Studio} supports resizing shapes as well as editing their properties using only the keyboard. It also supports editing connections, adding bend points, and moving their labels.

\subsubsection {Feature 6: {\em Creating diagram using a script}} 
Only two tools among the ones investigated were found to implement this feature, {\em Graphviz} and {\em BPLOT2}. {\em Graphviz} takes a textual description of the needed graph/diagram written in the {\em Dot Language}\cite{dot_lang}. {\em Graphviz} creates and lays out the diagram automatically and outputs it in many formats. Although {\em Graphviz} is not a diagramming tool, it implements a very similar functionality to the ones investigated. On the other hand, {\em BPLOT2}, being a diagramming (graphics creation) tool intended for the blind as well as the sighted, it offers a very good and easy language to describe the needed diagram exactly as one would want it to look like, for example, placing the shapes at exact coordinates. The language supports importing external files and drawing them in a virtual customizable coordinates. For example one could define the coordinates to scale the imported file to 50\% or reverse it vertically.



\section{Previous Research}
Very few researches were previously conducted on the topic investigated. Only one related research could be found ,BPLOT2 \cite{bplot2}. BPLOT2 was done to help implementing a system intended for blind as well as sighted people to create graphics to be printed on braille printers. The research investigated the language used as well as other things specific to the braille printing.
